<html>
<head>
<!-- the parent page must be import JQuery -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/fullcalendar.css">
    
    <script type="text/javascript" src="../js/fullcalendar.min.js"></script>
    
     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
   
</head>
<body>		
		<div class="div-center">
		   <div id='calendar'></div>
		</div>
		
<!-- easyUI form dialog --><!-- easyUI form dialog --><!-- easyUI form dialog -->  
<div id="bookingdlg" class="easyui-dialog" style="width:500px;height:400px;padding:10px 10px"  
        closed="true" buttons="#bookingdlg-buttons">  
    <div class="ftitle">Create New Booking</div>  
    
    <form id="bookingfm" method="post">  
        <div class="fitem"> 
            <label>Booking Date:</label> 
            <input  name="bookingDate" style="width:200px"/>
        </div>
        <input type="hidden" name="fm_BookingID_1"/>
        <div class="fitem">  
            <label>Trainer Name:</label>    
             <input id="trainterIDCC" name="trainerID" style="width:200px"  
                class="easyui-validatebox" required="true"/>  
        </div>  
        <div class="fitem">  
            <label>Member ID:</label>  
            <input name="memberID" class="easyui-validatebox" required="true" >  
        </div> 
        <div class="fitem">  
            <label>Avaliable Lease Time:</label>  
            <input id="leaseTimeCC" name="rangeID" style="width:300px" 
            class="easyui-validatebox" required="true"/>
               
        </div> 
   
        <div class="fitem">  
            <label>Remark:</label>  
            <input name="remark" >  
        </div> 
        <div class="fitem">  
            <label>Bonus Point:</label>  
            <input name="bonusPoint" >  
        </div>  
        <div class="fitem">  
            <label>Comfirm Email:</label>  
            <input name="comfirm_Email" class="easyui-validatebox" validType="email">  
        </div>  
    </form>  
</div>  
<div id="bookingdlg-buttons">  
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveBooking()">PreBooking</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#bookingdlg').dialog('close')">Cancel</a>  
</div>  
<!-- easyUI form dialog --> <!-- easyUI form dialog --> <!-- easyUI form dialog --> 		
		
<script type='text/javascript'>
function saveBooking(){  
	
    $('#bookingfm').form('submit',{  
        url: url,  
        onSubmit: function(){  
        	var isValid = $(this).form('validate');
        	//console.log(isValid+' post ' +url);
            return isValid;  
        },  
        success: function(result){  
        	
            var result = eval('('+result+')');  
            if (result.errorMsg){  
                $.messager.show({  
                    title: 'Error',  
                    msg: result.errorMsg  
                });  
            } else {  
            	$.messager.alert('Info',  result.succMsg,'info');
                $('#bookingdlg').dialog('close');      // close the dialog  
              //  $('#dg').datagrid('reload');    // reload the user data  
            }  
        }  
    });  
}  

function createBK(date){  
	
	$('#trainterIDCC').combogrid({
		value:'',
        panelWidth: 500,  
        idField: 'trainerID',  
        textField: 'MemberName',  
        editable:false,
        mode:'local', 
        url: 'FMActionServlet/ReadFM',  
        columns: [[  
            {field:'MemberID',title:'Member ID',width:50},
            {field:'MemberName',title:'Member Name',width:50},  
            {field:'MemberGender',title:'Member Gender',width:60},  
            {field:'MemberAge',title:'Member Age',width:40,align:'right'},  
            {field:'classification',title:'Classification',width:60,align:'center'} 
          ]],  
       fitColumns: true  
     });
	
	$('#leaseTimeCC').combogrid({  
		 value:'',
		 panelWidth: 400  ,
		 editable:false,
         idField: 'rangeID',  
         textField: 'leaseTime', 
         //mode:'remote',
         url: 'FMActionServlet/ReadTT?date='+date,  
         columns: [[
            {field:'leaseTime',title:'Lease Time',width:200},
            {field:'remark',title:'Remark',width:100}                
         ]],  
       fitColumns: true
	});  
	
    $('#bookingdlg').dialog('open').dialog('setTitle','Create New Booking');  
    $('#bookingfm').form('clear');  
    $('#bookingfm').form('load',{  
    	bookingDate: date, 	
    	leaseTime:date,
    	fm_BookingID_1:'BK',
    	factlilitesID:'2',
        memberID:'1',   
        bonusPoint:'100',  
        comfirm_Email:'wahfulau@yahoo.com.hk'  
    });
    url = 'FMActionServlet/CreateBK';
} 

$(document).ready(function() {
   var date = new Date();
   var d = date.getDate();
   var m = date.getMonth();
   var y = date.getFullYear();

   $('#calendar').fullCalendar({
	   header: {
		   left: 'prev,next today',
		   center: 'title',
		   right: 'month,basicWeek,basicDay'
	   },
	   editable: false,
	   eventSources: [{
            url: 'FMActionServlet/ReadBK',
            type:'POST',
            data: {
             	 qmonth:y+'-'+m
            }
	   }],
	    dayClick: function(date,allDay,jsEvent,view) {
	  	//when click the daybox, the booking dialog is showed.
	    createBK(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
	}
  });
});
</script>
</body>
</html>